<template>
  <div class="container">
    <div class="app-container">
      <div class="top">
        <el-form ref="formData" :model="formData" label-width="100px" class="demo-ruleForm" :inline="true">
          <el-row type="flex" justify="space-between">
            <el-form-item label="员工账号" prop="employeeNumber">
              <el-input v-model="formData.employeeNumber" placeholder="请输入员工账号" style="width:280px" />
            </el-form-item>
            <el-form-item label="员工姓名" prop="name">
              <el-input v-model="formData.name" placeholder="请输入员工姓名" style="width:280px" />
            </el-form-item>
            <el-form-item label="工作模式" prop="workPatternId">
              <el-select v-model="formData.workPatternId" placeholder="请选择工作模式" style="width:280px">
                <el-option v-for="item in patternsList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-row>

          <el-row type="flex" justify="space-between">
            <el-form-item label="月份" prop="month">
              <el-date-picker
                v-model="formData.month"
                value-format="yyyy-MM"
                type="month"
                placeholder="请选择月份"
                style="width:280px"
              />
            </el-form-item>

            <el-form-item label="所属机构" prop="agencyId">
              <el-cascader
                v-model="formData.agencyId"
                :options="options"
                style="width:280px;margin-right:140px"
                :show-all-levels="false"
                :props="defaultProps"
                placeholder="请选择所属机构"
                @change="agencyChange"
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" style="background: #e15536;width: 90px;border:0px" @click="searchBtn">搜索</el-button>
              <el-button style="width: 90px;margin-right:50px" @click="resetBtn">重置</el-button>
            </el-form-item>

          </el-row>
        </el-form>
      </div>

      <div class="main">
        <el-button type="primary" style="background: #e15536;width: 100px;border:0px" @click="$router.push('/employee/arrange-set')">排班设置</el-button>
        <el-button
          style="width: 100px;background: #ffeeeb;border-color: #f3917c;color: #e15536"
          @click="binding"
        >绑定排班</el-button>

        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%;margin-top:20px"
          :border="false"
          @select="SelectBtn"
        >
          <el-table-column align="center" fixed type="selection" width="55" />
          <el-table-column align="center" fixed prop="employeeNumber" label="员工账号" width="100" />
          <el-table-column align="center" fixed prop="name" label="员工姓名" width="100" />
          <el-table-column align="center" fixed prop="phone" label="员工电话" width="120" />
          <el-table-column align="center" fixed prop="userType" label="员工角色" width="100" />
          <el-table-column align="center" fixed prop="workPatternName" label="当前工作模式" width="120" />
          <!-- label 里面必须是字符串 -->
          <el-table-column v-for="(item,index) in monthList" :key="index+1" align="center" prop="name" :label="String(index+1)" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.workSchedules[index]" class="work">上</span>
              <span v-else class="rest">休</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination background layout="prev, pager, next" :total="total" @current-change="pageChange" />
        </el-row>
      </div>

      <!-- 排班弹框 -->
      <el-dialog
        title="人工调整"
        :visible.sync="visible"
        width="36%"
      >
        <el-row type="flex" justify="center">
          <div>
            <el-radio-group v-model="radio" @change="radioChange">
              <el-radio :label="1"><strong>礼拜制</strong></el-radio>
              <el-radio :label="2"><strong>连续制</strong></el-radio>
            </el-radio-group>
          </div>
        </el-row>
        <el-row type="flex" justify="center">
          <div style="height: 24px;line-height: 24px;margin-top:20px">
            <span style="margin-right:10px"><strong>模式名称:</strong></span>
            <el-select v-model="systemValue" placeholder="请选择" style="width: 293px;height: 40px;">
              <el-option
                v-for="item in systemList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>

        </el-row>

        <span slot="footer" class="dialog-footer">
          <el-row type="flex" justify="center">
            <el-button
              style="width: 89px;padding: 10px 20px;background: #e15536;border-radius: 4px;border-color: transparent;height:40px"
              type="primary"
              @click="putAdjust"
            >确 定</el-button>
            <el-button
              style="width: 89px;padding: 10px 20px;border-radius: 4px;height:40px"
              @click="visible = false"
            >取 消</el-button>
          </el-row>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getOrgAPI } from '@/api/basic'
import { adjustManAPI, getPatternsAPI, getSchedulingAPI } from '@/api/employee'
export default {
  name: 'Arrange',
  data() {
    return {
      formData: {
        agencyId: '',
        month: '',
        workPatternId: '',
        workPatternName: '',
        employeeNumber: '',
        name: '',
        page: 1,
        pageSize: 10
      },
      options: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        // 难点： 要传一个 id 过去不然会导致选择一个选项全部都会选中
        value: 'id',
        // 可以选中级联中 每一级 任意一个选项
        checkStrictly: true
      },
      tableData: [],
      multipleSelection: [],
      total: 1,
      visible: false,
      radio: 1,
      systemValue: '',
      systemType: '',
      systemList: {},
      monthList: [],
      userType: [
        { id: 1, value: '员工' },
        { id: 2, value: '快递员' },
        { id: 3, value: '司机' }
      ],
      patternsList: []
    }
  },
  async created() {
    this.getOrgList()
    this.schedulingList()
    const res = await getPatternsAPI()
    const list = res.data.data
    for (const key in list) {
      if (this.patternsList) {
        this.patternsList = [...this.patternsList, ...list[key]]
      } else {
        this.patternsList = [...list[key]]
      }
    }
  },
  methods: {
    async getOrgList() {
      const res = await getOrgAPI()
      // 将数组格式的字符串转换成数组
      // const arr = eval('(' + res.data.data + ')')
      const arr = JSON.parse(res.data.data)
      this.options = arr
    },
    agencyChange(data) {
      // data是获取到一个全部路径 id 的数组； 把初始地最后的 id 传给 endAgencyId
      this.formData.agencyId = data[data.length - 1]
    },
    async schedulingList(data) {
      const res = await getSchedulingAPI(data)
      this.tableData = res.data.data.items
      this.total = +res.data.data.counts
      this.monthList = res.data.data.items[0].workSchedules

      this.tableData.forEach(value => {
        this.userType.forEach(item => {
          if (value.userType === item.id) {
            value.userType = item.value
          }
        })
      })
    },
    pageChange(page) {
      this.formData.page = page
      this.schedulingList(this.formData)
    },
    resetBtn() {
      this.$refs.formData.resetFields()
      this.schedulingList()
    },
    searchBtn() {
      this.schedulingList(this.formData)
    },
    async radioChange(value) {
      this.systemType = value
      this.systemValue = ''
      const res = await getPatternsAPI()
      const obj = res.data.data
      for (const key in obj) {
        if (+key === value) {
          this.systemList = obj[key]
        }
      }
    },
    binding() {
      if (this.multipleSelection.length < 1) {
        this.$message.error('请选择调整人员')
        return
      }
      this.radio = 1
      this.radioChange(1)
      this.visible = true
    },
    SelectBtn(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    async putAdjust() {
      console.log(this.systemValue)
      if (!this.systemValue) {
        this.$message.error('请选择模式名称')
        return
      }
      this.visible = false
      const arr = []
      this.multipleSelection.forEach(item => arr.push(item.id))
      await adjustManAPI({
        userIdList: arr,
        workPatternId: this.systemValue,
        workPatternType: this.systemType
      })
      this.schedulingList()
      this.$message.success('调休成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.top{
  background-color: #fff;
  padding-top: 20px;
}
.main{
  margin-top: 20px;
  background-color: #fff;
  padding: 28px;
}
.work{
  width: 24px;
  height: 24px;
  background: #ffeeeb;
  border: 1px solid #e15536;
  border-radius: 50%;
  text-align: center;
  color: #e15536;
  font-size: 16px;
}
.rest{
    width: 24px;
    height: 24px;
    background: #eff3f8;
    border: 1px solid #d8dde3;
    border-radius: 50%;
    text-align: center;
    color: #20232a;
    font-size: 16px;
}
</style>
